<template>


  <el-container>

    <!--    <el-aside width="200px">-->
    <!--      <div style="display:flex;">-->
    <!--        <el-upload :auto-upload="false"-->
    <!--                   :show-file-list="false"-->
    <!--                   action="action"-->
    <!--                   :on-change="handleChange">-->
    <!--          <el-button type="primary">导入 excel</el-button>-->
    <!--        </el-upload>-->
    <!--      </div>-->
    <!--      <br/>-->

    <!--      &lt;!&ndash;      <avue-tree :option="treeOption"&ndash;&gt;-->
    <!--      &lt;!&ndash;                 :data="treeData"&ndash;&gt;-->
    <!--      &lt;!&ndash;                 @node-click="nodeClick"></avue-tree>&ndash;&gt;-->


    <!--    </el-aside>-->
    <el-main>
      <div style="display:flex;">
        <el-upload :auto-upload="false"
                   :show-file-list="false"
                   action="action"
                   :on-change="handleChange">
          <el-button type="primary">导入 excel</el-button>
        </el-upload>
      </div>

      <avue-crud :option="option"
                 :data="data"
                 :table-loading="loading"
                 v-model:page="page"
                 v-model:search="search"
                 @header-click="headerClick"
                 @search-change="searchChange"
                 @search-reset="searchReset"
                 @on-load="onLoad"
      >

        <template #index="{index}">
          <el-tag>{{ index + 1 }}</el-tag>
        </template>
      </avue-crud>
    </el-main>
  </el-container>

  <ColumnDefinedView v-model="dialogVisible">
  </ColumnDefinedView>
</template>

<script>
import ColumnDefinedView from "@/components/ColumnDefinedTable";
import {useMainPageStore} from "@/store/mainPageStore";
import pinia from "@/store/store";
import {useMainConfigStore} from "@/store/mainConfigStore";
import {processExcelData} from "@/util/preProcess";

const mainPageStore = useMainPageStore(pinia)
import _ from 'lodash';
import {read, utils} from "xlsx";
import {buildExamHallTree} from "@/util/appConfigUtil";
import {fastArrange} from "@/util/arrange";
import {logTimeSpan} from "@/util/examArrangeUtil";

const mainConfigStore = useMainConfigStore(pinia)
export default {
  name: "MainPage",
  components: {ColumnDefinedView},
  data() {
    return {
      dialogVisible: false,
      search: {},
      originData: [],
      pageData: [],
      percentage: 0,
      filterData: [],
      loading: false,
      page: {
        total: 1000,
        currentPage: 1,
        pageSize: 10
      },
      data: [{
        text1: '内容1-1',
        text2: '内容1-2',
        deep: {
          text3: '内容1-3',
        }
      }, {
        text1: '内容2-1',
        text2: '内容2-2',
        deep: {
          text3: '内容2-3',
        }
      }],
      treeOption: {
        defaultExpandAll: true,
        formOption: {
          labelWidth: 100,
          column: [{
            label: '自定义项',
            prop: 'test'
          }],
        },
        props: {
          labelText: '标题',
          label: 'label',
          value: 'value',
          children: 'children'
        }
      },
      treeData: [
        {
          value: 0,
          label: '计算机基础(88)',
          children: [
            {
              value: 1,
              label: '花津校区',
              children: [
                {
                  value: 1,
                  label: '2060404',
                }
              ]
            },
            {
              value: 2,
              label: '赭山校区',
              children: [
                {
                  value: 1,
                  label: '2060404',
                }
              ]
            },
            {
              value: 3,
              label: '天门山校区',
              children: [
                {
                  value: 1,
                  label: '2060404',
                }
              ]
            }
          ]
        },
        {
          value: 0,
          label: '计算机导论(80)',
          children: [
            {
              value: 1,
              label: '花津校区',
              children: [
                {
                  value: 1,
                  label: '2060404',
                }
              ]
            },
            {
              value: 2,
              label: '赭山校区',
              children: [
                {
                  value: 1,
                  label: '2060404',
                }
              ]
            },
            {
              value: 3,
              label: '天门山校区',
              children: [
                {
                  value: 1,
                  label: '2060404',
                }
              ]
            }
          ]
        }

      ],

      option: {
        index: true,
        indexLabel: "序号",
        excelBtn: true,

      },
      formOption: {
        column: [
          {
            label: '输入框',
            prop: 'input',
            type: 'input'
          },
          {
            label: '输入框',
            prop: 'input1'
          }
        ]
      }
    }
  }, created() {
    this.treeData = buildExamHallTree()
    this.initData();

  },

  methods: {
    onLoad() {
      this.subPage(this.filterData);
    },
    subPage(data) {
      let {currentPage, pageSize, total} = this.page
      // if (pageSize !== this.page.pageSize) {
      if (data.length !== total || this.pageData.length > 0 && (this.pageData[0].length !== pageSize)) {
        this.pageData = _.chunk(data, pageSize)
      }
      this.page.total = data.length;
      this.data = this.pageData[currentPage - 1]
    },
    initData() {

    },
    nodeClick(data) {

      this.$message.success(JSON.stringify(data))
    },
    handleChange: function (file) {
      var that = this;
      this.loading = true
      this.loadDataFromExcel(file).then(data => {

        this.option.column = data.header.map(item => {
          let column = {
            label: item,
            prop: item,
          }
          // eslint-disable-next-line no-prototype-builtins
          if (mainConfigStore.columns.hasOwnProperty(item)) {
            column = mainConfigStore.columns[item]
          }
          return {
            ...column
          }
        })
        that.originData = processExcelData(data.results)
        that.filterData = that.originData
        //分页
        that.subPage(that.filterData)
        mainPageStore.setData(that.originData)
        mainPageStore.setHeader(data.header)
        mainPageStore.setColumn(that.option.column)


        that.loading = false;
        //todo
        logTimeSpan(fastArrange)
      })
    },
    headerClick(column, event) {
      console.log(column, event)
      this.dialogVisible = true
    }, searchChange(form, done) {

      let data = this.originData.filter(item => {
        let bool = true;
        for (let searchKey in form) {
          bool = bool && item[searchKey] === form[searchKey]
        }
        return bool;
      })
      console.log(data)
      this.subPage(data)
      this.filterData = data;
      done()
      console.log(form)
    }, searchReset() {
      this.filterData = this.originData;
      this.subPage(this.filterData)
    },
    async loadDataFromExcel(file) {
      console.log(file)
      return new Promise((resolve) => {
        var fileReader = new FileReader();
        fileReader.onprogress = (e) => {
          console.log()
          this.percentage = e.loaded / e.total * 100
        }
        fileReader.onload = (e) => {

          setTimeout(() => {


          }, 1000 / 60)
          var result = e.currentTarget.result;
          var workBook = read(result);
          const ws = workBook.Sheets[workBook.SheetNames[0]];
          var sheetToJson = utils.sheet_to_json(ws);

          resolve({
            results: sheetToJson,
            header: Object.keys(sheetToJson[0])
          })
        }
        fileReader.readAsArrayBuffer(file.raw)
      })
    }
  }
}
</script>

<style scoped>

</style>